<template>
    <div class="square-content">
        <div class="square-container">
            <div class="card-container">
                <div v-for="(item, index) in cardList" :key="index" class="el-card" @click="toPage(item)"
                    :style="{ backgroundImage: `url(${item.bg})`, backgroundSize: 'cover', backgroundPosition: 'center' }">
                    <div class="card-content">
                        <div class="card-title">{{ item.title }}</div>
                        <div class="card-desc">{{ item.desc || '暂无描述信息' }}</div>
                        <div class="card-btn">
                            {{ item.btn }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const cardList = ref([
  
    // {
    //     title: "合同对比",
    //     desc: "可以识别新增、删除的内容，并以直观的方式展示这些变化。帮助用户快速审查合同条款的变化，确保没有遗漏重要的修改。",
    //     router: '/squareend',
    //     bg: require('@/assets/images/aibg1.png'),
    //     btn: '立即使用',
    //     bot_id:'app-q1WQIYFgyDI4yjbeV2h6PYMi',
    //     bot_index:1
        
    // },
    {
        title: "邮件生成",
        desc: "能够快速地帮您生成所需的邮件内容。无论是商务沟通还是日常事务，都可以通过简单的输入生成专业的邮件文本。",
        router: '/home',
        bg: require('@/assets/images/aibg2.png'),
        btn: '立即使用',
        bot_id:'app-kkhWPUEda1crfeY0EHxRlxkr',
        bot_index:2
    },
    {
        title: "商讯侦探",
        desc: "帮助企业或个人获取最新的商业资讯和市场动态。通过智能分析，提供有价值的商业情报，助力决策。",
        router: '/home',
        bg: require('@/assets/images/aibg3.png'),
        btn: '立即使用',
        bot_id:'app-WlZ6Lc99zLYm4GnrAuST5McI',
        bot_index:3
    },
    {
        title: "翻译助理",
        desc: "支持多种语言之间的翻译，无论是文档、网页还是即时消息，都能提供准确的翻译结果。提升跨语言交流的效率。",
        router: '/home',
        bg: require('@/assets/images/aibg4.png'),
        btn: '立即使用',
        bot_id:'app-4GNiIGrKMZFV9FE2lSJZB5cE',
        bot_index:4
    },
    {
        title: "工作计划制定",
        desc: "帮助用户制定详细的工作计划，包括任务分配、时间安排和优先级排序。提高工作效率，确保项目按时完成。",
        router: '/home',
        bg: require('@/assets/images/aibg5.png'),
        btn: '立即使用',
        bot_id:'app-DQs3F6TPLcoFRnOU0KOolIBh',
        bot_index:5
    },
    {
        title: "半导体名词小助理",
        desc: "专门为半导体行业设计的小助手，帮助用户理解复杂的半导体术语和技术概念。提供详细的解释和应用场景。",
        router: '/home',
        bg: require('@/assets/images/aibg6.png'),
        btn: '立即使用',
        bot_id:'app-sM5Eez69NH2yfI5aefmISAtw',
        bot_index:6
    },
]);
const emits = defineEmits(["handTabChange"])
const toPage = (item) => {
    let data = {
        bot_id: item.bot_id,

        bot_index: item.bot_index
    }
    emits("handTabChange", data);
}
</script>
<style lang="scss" scoped>
.square-content {
    height: 100vw;
    width: 100%;
    background-color: #f1f8fe;
}

.square-container {
    padding-top: 200px;
}

.square-container {
    width: 100vw;
    height: 95vh;
    display: flex;
    margin: 10px auto;
    flex-direction: column;
    position: relative;
    border-radius: 14px;
    background: #f3f9ff;
}

.square-header {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 20px;
}

.square-header img {
    margin-right: 10px;
}

.square-title {
    font-size: 20px;
    font-weight: 500;
}

.el-card {
    background-color: #fff;
    width: calc(50% - 40px);
    /* 每个卡片占据一半宽度减去间距 */
    height: 350px;
    /* 根据内容自动调整高度 */
    margin: 20px auto;
    cursor: pointer;
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-content {
    display: flex;
    flex-direction: column;
    justify-content: row;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
    
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 10px;
}

.card-desc {
    flex-grow: 1;
    font-size: 16px;
    margin-left: 10px;
    color: #999999;
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置显示的最大行数 */
    -webkit-box-orient: vertical;
}

.card-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: -50px;
    font-size: 20px;

    button {
        padding: 15px 30px;

    }
}

.right-icon {
    margin-left: 5px;
    font-size: 14px;
}

.card-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-y: auto !important;
    margin: 0px 10px;
    overflow: hidden;
    padding-bottom: 40px;
    /* 添加间距 */
}
</style>